<script setup lang="ts">
import { getCurrentInstance, reactive, nextTick } from 'vue'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()

/* ---- */
const layer = reactive({
  show: false,
  // ----
  type: 0,
  shade: false,
  shadeClose: true,
  bgOpacity: 0.8,
  // ----
  box: false,
  boxAbs: null,
  boxStyle: {},
  // ----
  toast: false,
  position: '',
  time: 0,
  // ----
  loading: false,
  // ----
  title: '',
  content: '',
  desc: '',
  button: [],
  // ----
  callback: '',
  // --mescroll--
  noData: proxy.$Global.noData,
  infos: {},
  forScroll: null,
  items: [],
  // ----
  listTitle: '',
  listData: [],
  // ----
  isNumber: /^([1-9]\d*|[0]{1,1})$/,
  maxCount: 5,
  fieldName:'name',
  form: {}
})

/* ---- */
const open = (opt) => {
  if (opt) {
    for (const key in opt) { layer[key] = opt[key] }
  }
  layer.show = true
  // ----
  switch (Number(layer.type)) {
    case 1: {
      if (layer.time > 1) {
        nextTick(() => {
          layer.toast = true
          setTimeout(() => {
            layer.callback && layer.callback()
            close()
          }, layer.time * 1000)
        })
        return false
      }
      break
    }
    case 2: {
      nextTick(() => { layer.loading = true })
      break
    }
    case 4: {
      nextTick(() => {
        layer.shade = true
        layer.box = true
        // ----
        layer.items = []
        setTimeout(() => { startLayerMeScroll() }, 400)
      })
      break
    }
    case 6: {
      nextTick(() => {
        layer.shade = true
        layer.box = true
        // ----
        layer.form = {
          count: 1
        }
      })
      break
    }
    case 7: {
      nextTick(() => {
        layer.shade = true
        layer.box = true
        // ----
        layer.form = {
          count: 1
        }
      })
      break
    }
    case 8: {
      nextTick(() => {
        layer.shade = true
        layer.box = true
        // ----
        layer.form = {
          smscode: ''
        }
      })
      break
    }
    case 9: {
      nextTick(() => {
        layer.shade = true
        layer.box = true
        // ----
        layer.form = {
          [layer.fieldName]: ''
        }
      })
      break
    }
    default: {
      nextTick(() => {
        layer.shade = true
        layer.box = true
      })
    }
  }
}
const forPosition = (position) => {
  switch (String(position)) {
    case 'top': {
      return { margin: '0 0 120%' }
      break
    }
    case 'bottom': {
      return { margin: '120% 0 0' }
      break
    }
  }
}
const sureBtn = (item) => {
  let info = ''
  if (item.callback) {
    switch (Number(layer.type)) {
      case 5: {
        const newItems = []
        layer.listData.forEach((curItem) => {
          if (curItem.light) newItems.push(curItem)
        })
        info = newItems
        break
      }
      case 6: {
        info = layer.form.count
        break
      }
      case 7: {
        const newItems = []
        layer.listData.forEach((curItem) => {
          if (curItem.light) newItems.push(curItem)
        })
        info = {
          data: newItems,
          count: layer.form.count
        }
        break
      }
      case 8: {
        info = layer.form.smscode
        break
      }
      case 9: {
        info = layer.form
        break
      }
    }
    item.callback(info)
    return false
  }
  close()
}
const close = () => {
  layer.shade = false
  layer.box = false
  layer.toast = false
  layer.loading = false
  // ----
  setTimeout(() => {
    layer.show = false
    layer.shadeClose = true
    if (Number(layer.type) !== 1) layer.callback = ''
    // ----
    layer.boxAbs = null
    // ----
    layer.type = 0
    layer.title = ''
    layer.content = ''
    layer.desc = ''
    // ----
    layer.listTitle = ''
    layer.listData = []
  }, 300)
}
const maskClose = () => { layer.shadeClose && close() }
// --getData--
const startLayerMeScroll = () => {
  layer.forScroll = new MeScroll(proxy.$refs.layerScroll, {
    up: {
      callback: getLayerListData,
      isBounce: false,
      page: { num: layer.infos.page.num, size: layer.infos.page.size },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: layer.infos.page.noSize,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.layerList,
        tip: layer.noData
      }
    }
  })
}
const getLayerListData = (page) => {
  const extra = {
    sort: 'SORT_DESC',
    // ----
    config_id: layer.infos.config.config_id,
    openid: layer.infos.config.openid,
    // ----
    page: page.num,
    PageSize: page.size
  }
  switch (String(layer.infos.type)) {
    case 'post': {
      Object.assign(layer.infos.data, extra)
      break
    }
    case 'get': {
      Object.assign(layer.infos.data.params, extra)
      break
    }
  }
  // ----
  getLayerListDataFromNet({
    forType: layer.infos.type,
    forUrl: layer.infos.url,
    forData: layer.infos.data
  }, page.num, page.size, (curPageData) => {
    setLayerListData(curPageData).then((result) => {
      layer.forScroll.endSuccess(curPageData ? curPageData.length : 0, true)
      layer.items = layer.items.concat(result)
    })
  }, (resMsg) => {
    layer.forScroll.endErr()
    window.console.log(resMsg)
  })
}
const getLayerListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    layer.items = []
  }
  // ----
  proxy.$http[option.forType](option.forUrl, option.forData).then((res) => {
    switch (String(option.forType)) {
      case 'post': {
        if (res.success) {
          successCallback && successCallback(res.datainfo)
        } else { errorCallback && errorCallback(res.message) }
        break
      }
      case 'get': {
        successCallback && successCallback(res.items)
        break
      }
    }
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const getLayerNeedDate = async (curItem) => {
  await proxy.$http.get('dealer/index', {
    params: { 'DealerSearch[id]': curItem.dealer_id }
  }).then((res) => {
    if (Number(res.items.length) > 0) curItem.name = res.items[0].telphone
  }).catch((err) => { window.console.log(err) })
}
const setLayerListData = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    const curItem = {
      id: item.id,
      dealer_id: item.dealer_id,
      name: '',
      date: proxy.$Myfun.getDateShort(item.created),
      amount: item.amount,
      styleOne: { width: '34%' },
      styleThree: { width: '32%' }
    }
    // ----
    await getLayerNeedDate(curItem)
    // ----
    newItems.push(curItem)
  }
  return newItems
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
// ----
const getAuditFun = (type, item, obj) => {
  switch (Number(type)) {
    case 1: {
      if (Object.prototype.toString.call(obj) === '[object Array]') {
        const forLight = item.light
        obj.forEach((curItem) => { curItem.light = false })
        if (!forLight) item.light = !item.light
        return false
      }
      // ----
      item.light = !item.light
      break
    }
    case 3: {
      if (Number(layer.form.count) <= 1) return false
      layer.form.count--
      // ----
      layer.callback && layer.callback(layer.form.count)
      break
    }
    case 4: {
      if (Number(layer.form.count) >= Number(layer.maxCount)) return false
      layer.form.count++
      // ----
      layer.callback && layer.callback(layer.form.count)
      break
    }
    case 5: {
      proxy.$Myfun.setIosToTop()
      // ----
      if (!layer.isNumber.test(layer.form.count)) layer.form.count = 1
      // ----
      if (Number(layer.form.count) > Number(layer.maxCount)) layer.form.count = layer.maxCount
      // ----
      layer.callback && layer.callback(layer.form.count)
      break
    }
  }
}

/* ---- */
defineExpose({
  layer,
  open,
  close
})
</script>

<template>
  <div class="layerBox" :class="{'zLevel':layer.type==1}" v-if="layer.show">
    <transition name="fade">
      <div class="mask" v-if="layer.shade" @click="maskClose" :style="{ background: 'rgba(0, 0, 0, ' + layer.bgOpacity + ')' }"></div>
    </transition>
    <div class="LYB-main">
      <div class="LYB-td">
        <transition name="scale" v-if="Number(layer.type) === 0">
          <div class="LYB-box" :class="layer.boxAbs" v-if="layer.box">
            <div class="LYB-box-close xw-flex xw-flex-center" @click="close" v-if="layer.boxAbs"><em class="fal fa-times"></em></div>
            <div class="LYB-box-body">
              <div class="LYB-box-title" v-html="layer.title" v-if="layer.title"></div>
              <div class="LYB-box-info" v-html="layer.content" v-if="layer.content"></div>
              <div class="LYB-box-desc" v-html="layer.desc" v-if="layer.desc"></div>
            </div>
            <div class="LYB-box-foot" v-if="Number(layer.button.length) > 0">
              <span v-for="(item, index) in layer.button" :class="item.class" @click="sureBtn(item)" v-html="item.text"></span>
            </div>
          </div>
        </transition>
        <transition name="fade" v-if="Number(layer.type) === 1">
          <div class="LYB-toast" :style="forPosition(layer.position)" v-if="layer.toast" v-html="layer.content"></div>
        </transition>
        <transition name="fade" v-if="Number(layer.type) === 2">
          <div class="LYB-load" v-if="layer.loading">
            <div class="LYB-load-box"></div>
            <div class="LYB-load-txt" v-if="layer.title" v-html="layer.title"></div>
          </div>
        </transition>
        <transition name="scale" v-if="Number(layer.type) === 3">
          <div class="LYB-con" v-if="layer.box">
            <div class="LYB-con-info" v-html="layer.content"></div>
          </div>
        </transition>
        <transition name="scale" v-if="Number(layer.type) === 4">
          <div class="LYB-scroll" v-if="layer.box">
            <div ref="layerScroll" class="mescroll">
              <div class="list-layer" ref="layerList">
                <ul>
                  <li>
                    <div v-for="(item, index) in layer.infos.head" :style="item.style">{{item.name}}</div>
                  </li>
                  <li v-for="(item, index) in layer.items">
                    <div :style="item.styleOne" v-if="layer.infos.head[0]">{{item[layer.infos.head[0].key]}}</div>
                    <div v-if="layer.infos.head[1]">{{item[layer.infos.head[1].key]}}</div>
                    <div :style="item.styleThree" v-if="layer.infos.head[2]">{{item[layer.infos.head[2].key]}}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </transition>
        <transition name="scale" v-if="Number(layer.type) === 5">
          <div class="LYB-box" v-if="layer.box">
            <div class="LYB-box-body">
              <div class="LYB-box-title" v-html="layer.title" v-if="layer.title"></div>
              <div class="LYB-box-info" v-html="layer.content" v-if="layer.content"></div>
              <div class="LYB-list" v-if="Number(layer.listData.length) > 0">
                <div class="LYB-list-title" v-html="layer.listTitle" v-if="layer.listTitle"></div>
                <ul>
                  <li v-for="(item, index) in layer.listData" class="xw-act" :class="{'active': item.light}" @click="getAuditFun(1, item, layer.listData)">
                    <div class="LYB-list-item xw-flex xw-flex-align">
                      <em :class="[item.light ? 'fa fa-square-check' : 'fal fa-square-check']"></em>
                      <span>{{item.text}}</span>
                    </div>
                    <div class="LYB-list-desc" v-html="item.desc" v-if="item.desc"></div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="LYB-box-foot" v-if="Number(layer.button.length) > 0">
              <span v-for="(item, index) in layer.button" :class="item.class" @click="sureBtn(item)" v-html="item.text"></span>
            </div>
          </div>
        </transition>
        <transition name="scale" v-if="Number(layer.type) === 6">
          <div class="LYB-box" :style="layer.boxStyle" v-if="layer.box">
            <div class="LYB-box-body">
              <div class="LYB-box-title" v-html="layer.title" v-if="layer.title"></div>
              <div class="LYB-box-info" v-html="layer.content" v-if="layer.content"></div>
              <div class="formSet">
                <ul>
                  <li>
                    <div class="form-plus xw-flex xw-flex-align">
                      <i>购买数量</i>
                      <a class="FPS-add xw-act" @click="getAuditFun(3)">－</a>
                      <div class="FPS-con xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="layer.form.count" @blur="getAuditFun(5)"/></div>
                      <a class="FPS-add xw-act" @click="getAuditFun(4)">＋</a>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="LYB-box-desc" v-html="layer.desc" v-if="layer.desc"></div>
            </div>
            <div class="LYB-box-foot" v-if="Number(layer.button.length) > 0">
              <span v-for="(item, index) in layer.button" :class="item.class" @click="sureBtn(item)" v-html="item.text"></span>
            </div>
          </div>
        </transition>
        <transition name="scale" v-if="Number(layer.type) === 7">
          <div class="LYB-box" :style="layer.boxStyle" v-if="layer.box">
            <div class="LYB-box-body">
              <div class="LYB-box-title" v-html="layer.title" v-if="layer.title"></div>
              <div class="LYB-box-info" v-html="layer.content" v-if="layer.content"></div>
              <div class="formSet">
                <ul>
                  <li>
                    <div class="form-plus xw-flex xw-flex-align">
                      <i>购买数量</i>
                      <a class="FPS-add xw-act" @click="getAuditFun(3)">－</a>
                      <div class="FPS-con xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="layer.form.count" @blur="getAuditFun(5)"/></div>
                      <a class="FPS-add xw-act" @click="getAuditFun(4)">＋</a>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="LYB-list" v-if="Number(layer.listData.length) > 0">
                <div class="LYB-list-title" v-html="layer.listTitle" v-if="layer.listTitle"></div>
                <ul class="xw-float">
                  <li v-for="(item, index) in layer.listData" :class="['xw-float-W2', item.light ? 'active' : '']" @click="getAuditFun(1, item, layer.listData)"><div class="xw-act xw-flex xw-flex-align"><p></p>
                    <em :class="[item.light ? 'fa fa-square-check' : 'fal fa-square-check']"></em>
                    <span>{{item.text}}</span>
                  </div></li>
                </ul>
              </div>
            </div>
            <div class="LYB-box-foot" v-if="Number(layer.button.length) > 0">
              <span v-for="(item, index) in layer.button" :class="item.class" @click="sureBtn(item)" v-html="item.text"></span>
            </div>
          </div>
        </transition>
        <transition name="scale" v-if="Number(layer.type) === 8">
          <div class="LYB-form" :style="layer.boxStyle" v-if="layer.box">
            <div class="LYB-form-body xw-flex">
              <div class="formSet xw-flex-W1">
                <ul>
                  <li>
                    <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
                      <p class="xw-flex-W1"><input class="text" type="text" placeholder="请输入验证码" v-model.trim="layer.form.smscode"/></p>
                      <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="layer.form.smscode"></em></transition>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="LYB-form-btns xw-flex" v-if="Number(layer.button.length) > 0">
                <span class="xw-flex xw-flex-center" v-for="(item, index) in layer.button" :class="item.class" @click="sureBtn(item)" v-html="item.text"></span>
              </div>
            </div>
          </div>
        </transition>

        <transition name="scale" v-if="Number(layer.type) === 9">
          <div class="LYB-box" :class="layer.boxAbs" v-if="layer.box">
            <div class="LYB-box-close xw-flex xw-flex-center" @click="close" v-if="layer.boxAbs"><em class="fal fa-times"></em></div>
            <div class="LYB-box-body">
              <input class="xw-borCL-13 text" type="text" placeholder="请输入" v-model.trim="layer.form[layer['fieldName']]"/>
            </div>
            <div class="LYB-box-foot" v-if="Number(layer.button.length) > 0">
              <span v-for="(item, index) in layer.button" :class="item.class" @click="sureBtn(item)" v-html="item.text"></span>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* ---- */
.layerBox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; }
.layerBox.zLevel{z-index: 999999;}
.mask, .LYB-main { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.LYB-main { display: table; pointer-events: none; }
.LYB-td { display: table-cell; vertical-align: middle; text-align: center; }

/* ---- */
.LYB-box { position: relative; display: inline-block; min-width: 60%; max-width: 80%; background: rgba(255, 255, 255, 1); border-radius: 1.6rem; pointer-events: auto; }
.LYB-box-close { position: absolute; top: -1rem; right: -1rem; width: 3.4rem; height: 3.4rem; background: #ffffff; box-shadow: 0 0 1.5rem #666666; border-radius: 50% }
.LYB-box-close em { font-size: 1.8rem; }
.LYB-box-close:active { color: #ffffff; background: #ff5722; }
.LYB-box-body { padding: 1.4rem; }
.LYB-box-body .formSet { padding: 1rem 0 0; margin: 0 0 -0.5rem; }
.LYB-box-body .form-txt i { font-size: 1.4rem; }
.LYB-box-title { padding: 0 0 1rem; text-align: center; line-height: 2rem; }
.LYB-box-info { text-align: center; line-height: 3.5rem; font-size: 2rem; font-weight: bold; }
.LYB-box-desc { padding: 1rem 0 0; text-align: center; line-height: 2rem; }
.LYB-box-foot { position: relative; display: flex; align-items: center; }
.LYB-box-foot:before { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, 0.2); content:""; -webkit-transform: scaleY(.5); transform: scaleY(.5); }
.LYB-box-foot span { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.2rem 0; white-space: nowrap; text-overflow: ellipsis; font-size: 1.6rem; overflow: hidden; }
.LYB-box-foot span:active { background: rgba(0, 0, 0, 0.1); }
.LYB-box-foot span:before { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(0, 0, 0, 0.2); content:""; -webkit-transform: scaleX(.5); transform: scaleX(.5); }
.LYB-box-foot span:first-child:before { width: 0; }

/* ---- */
.LYB-toast { display: inline-block; position: relative; padding: 1rem 1.2rem; max-width: 80%; line-height: 2.5rem; font-size: 1.6rem; color: #ffffff; text-align: justify; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.5); border-radius: 1.3rem;}

/* ---- */
.LYB-load { position: relative; padding: 2.8rem 1.4rem 1.2rem; display: inline-block; max-width: 80%; color: #ffffff; text-align: center; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.5); box-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.5); -webkit-border-radius: 1.3rem; -moz-border-radius: 1.3rem; border-radius: 1.3rem; }
.LYB-load-box { position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; background: #ffffff; -webkit-animation: preloader 1.5s infinite linear; animation: preloader 1.5s infinite linear; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: visible; }
.LYB-load-box:after { position: absolute; width: 2.3rem; height: 2.3rem; border-top: 0.6rem solid #ffffff; border-bottom: 0.6rem solid #ffffff; border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content: ''; top: -1rem; left: -1rem; }
@-webkit-keyframes preloader {
  0% { transform: rotate(0deg); opacity: 0.3; }
  50% { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.3; }
}
@keyframes preloader{
  0% { transform: rotate(0deg); opacity: 0.3; }
  50% { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.3; }
}
.LYB-load-txt { padding: 1.4rem 0 0; }

/* ---- */
.LYB-con { position: relative; display: inline-block; max-width: 80%; background: rgba(255, 255, 255, 1); -webkit-border-radius: 1.3rem; -moz-border-radius: 1.3rem; border-radius: 1.3rem; pointer-events: auto; overflow: visible; }
.LYB-con-info { padding: 1rem; font-size: 1.6rem; overflow: visible; }
.LYB-con-info img { width: 100%; }

/* ---- */
.LYB-scroll { position: relative; display: inline-block; padding: 1rem 1rem 0; width: 90%; height: 80%; background: rgba(255, 255, 255, 1); -webkit-border-radius: 1.3rem; -moz-border-radius: 1.3rem; border-radius: 1.3rem; pointer-events: auto; }
.list-layer ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-layer ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 1px 1px 0 0; }
.list-layer ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; font-size: 1.3rem; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px 1px; }
.list-layer ul li:nth-of-type(1) { background: #f0f0f0; }

/* ---- */
.LYB-list { padding: 0 1rem; }
.LYB-list-title { padding: 1rem 0 0; line-height: 2.5rem; font-size: 1.5rem; }
.LYB-list ul li { padding: 1rem 0 0; }
.LYB-list ul li:nth-of-type(2n) div p { flex: 1; }
.LYB-list ul li div span { font-size: 1.5rem; }
.LYB-list ul li div em { margin-right: 1rem; font-size: 1.7rem; color: #d7d7d7; }
.LYB-list ul li.active div span, .LYB-list ul li.active div em { color: #3388ff; }
.LYB-list ul li div.LYB-list-item span { font-size: 1.6rem; font-weight: bold; }
.LYB-list ul li div.LYB-list-desc { padding: 0.5rem 0 0 2.5rem; line-height: 2.5rem; text-align: left; }

/* ---- */
.LYB-form { position: relative; display: inline-block; max-width: 80%; background: rgba(255, 255, 255, 1); border-radius: 1.6rem; pointer-events: auto; }
.LYB-form-body { padding: 2.5rem 2rem; }
.LYB-form-body .formSet { padding: 0; }
.LYB-form-body .formSet li { padding: 0; }
.LYB-form-btns span { margin: 0 0 0 1rem; padding: 0 1rem; font-size: 1.6rem; }
</style>
